<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3+JS实现超炫的散列画廊特效</title>
  <link href="css/reset.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!-- 禁止用户选中网页上的内容，IE及Chrome下的方法一样，使用 onselectstart="return false"
  -- Firefox 下，控制 css: body {-moz-user-select: none;}
-->
<body onselectstart="return false;"  style="-moz-user-select:none;">
  <!-- 加载动画  -->
  <div class="spinner"><i></i></div>

  <div class="wrap" id="wrap" cloak>
    <div class="photo photo_center photo_front" onclick="turn(this)" id="photo_{{index}}">
      <div class="photo-wrap">
        <div class="side side-front">
            <p class="image">
              <img src="{{img}}" alt="">
            </p>
            <p class="caption">{{caption}}</p>
        </div>
        <div class="side side-back">
          <p class="desc">{{desc}}</p>
        </div>
      </div>
    </div>
  </div>
<script src="images/data.js"></script>
  <script>
      /* 随机函数 min~max */
     function random(range){
       var max = Math.max(range[0],range[1]);
       var min = Math.min(range[0],range[1]);
       var diff = max - min;
       return Math.round(Math.random() * diff + min)
     }
     /* 计算左右分区的范围，使其他海报的显示不会超出此范围 */
     function range(){
       var range ={
         left:{
           x:[],
           y:[]
         },
         right:{
           x:[],
           y:[]
         }
       };
        //获取最外围容器的宽度和高度
       var wrap = {
         width:document.getElementById('wrap').clientWidth,
         height:document.getElementById('wrap').clientHeight
       };
       //获取每一张海报的宽度和高度，因为海报的大小都是一样的，所以取第一张
       var photo = {
         width:document.getElementsByClassName('photo')[0].clientWidth,
         height:document.getElementsByClassName('photo')[0].clientHeight
       };
       range.left.x = [ 0 - photo.width / 4, wrap.width/2 - photo.width*3/4];
       range.left.y = [ photo.height / 4,wrap.height - photo.height/4];
       range.right.x = [ wrap.width/2 + photo.width*3/4,wrap.width + photo.width / 4];
       range.right.y = range.left.y;
       return range;
     }
     /* 海报排序 */
     function poster_sort(no){
       var _photo = document.getElementsByClassName('photo');
       var photos = [];
       for(var i = 0; i < _photo.length;i++){
         /*重排序之前去除所有图片样式*/
         _photo[i].className = "photo photo_front";
         /* 清除位置 */
         _photo[i].style.left = _photo[i].style.top = '';
         /* 清除transform：rotate() */
         _photo[i].style['transform'] = _photo[i].style['-webkit-transform'] = '';

         photos.push(_photo[i]);
       }
       var photo_center = document.getElementById('photo_'+no);
       photo_center.className += " photo_center";
       //把photo_center从数组里删掉
       photos.splice(no-1,1);
       // 把剩下的海报分为左右两部分
       var photos_left = photos.splice(0,Math.ceil(photos.length / 2));
       var photos_right = photos;
       var ranges = range();
       // 对左右区域的海报位置进行随机赋值
       for(var j = 0; j<photos_left.length;j++){
         var photo = photos_left[j];
         photo.style.left = random(ranges.left.x) + 'px';
         photo.style.top = random(ranges.left.y) + 'px';
         photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg)';
       }
       for(var s = 0;s<photos_right.length;s++){
         var photo = photos_right[s];
         photo.style.left = random(ranges.right.x) + 'px';
         photo.style.top = random(ranges.right.y) + 'px';
         photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg)';
       }
      // 控制按钮处理
      var navs = document.getElementsByClassName('i');
      for(var k = 0;k < navs.length;k++){
        navs[k].className = 'i';
      }
      document.getElementById('nav_'+no).className += ' i_current';
     }

     /* 图片翻转 */
     function turn(elem){
      var cls = elem.className;
      var n = elem.id.split('_')[1];
      if(!/photo_center/.test(cls)){
        return poster_sort(n);
      }
      if(/photo_front/.test(cls)){
        cls = cls.replace(/photo_front/,'photo_back');
        //nav
        document.getElementById('nav_'+n).className += ' i_back';
      } else {
        cls = cls.replace(/photo_back/,'photo_front');
        //nav
        document.getElementById('nav_'+n).className = document.getElementById('nav_'+n).className.replace(/\s*i_back\s*/,'');
      }
      elem.className = cls;
     }

     // 4.输出所有的海报
     function addAllPhotos(){
       var template = document.getElementById('wrap').innerHTML;
       var html = [];
       var nav = [];
       for(var i=0;i<data.length;i++){
         var _html = template.replace('{{index}}',i+1).replace('{{img}}',data[i].img).replace('{{caption}}',data[i].caption).replace('{{desc}}',data[i].desc);
         html.push(_html);
         nav.push('<span id="nav_'+(i+1)+'" onclick="turn(document.getElementById(\'photo_'+(i+1)+'\'))" class="i"></span>');
       }
       html.push('<div class="nav">'+nav.join('')+'</div>');
       document.getElementById('wrap').innerHTML = html.join('');
       poster_sort(random([1,data.length]));
       document.querySelector('[cloak]').removeAttribute('cloak');
       window.onload = function(){
         /* 停止spinner动画 */
         document.querySelector('.spinner').style.display = 'none';
       }
     }
     addAllPhotos();
  </script>
</body>
</html>
